<template>
  <div class="superInviter">
    <!-- 状态 -->
    <div class="inquire_box">
      <div class="status_list">
        <div v-for="(item, index) in status_list" :key="index" class="li" :style="{ color: statusIndex == index ? '#ffb72f' : '' }" @click="statusBtn(index)">
          {{ item.txt }}
        </div>
      </div>

      <div class="serch_box">
        <el-input v-model="conditions.merchName" placeholder="请输入商户名称" />
        <el-input v-model="conditions.merchPhone" placeholder="请输入联系电话" />
        <el-select v-model="conditions.stakeValue" placeholder="请选择出资方">
          <el-option v-for="item in conditions.stake" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
        <el-button type="primary" @click="serchBtn">搜索</el-button>
        <el-button type="primary" @click="resetBtn">重置</el-button>
      </div>
    </div>

    <!-- 规则提示 -->
    <div v-if="statusIndex == 0" class="tipRule">
      <div v-if="statusIndex == 0" class="top-tips app-main-tips-box">
        <div class="title">
          <i class="el-icon-warning" />
          说明
        </div>
        <ul>
          <li>1.邀请方修改了优惠折扣/抽佣比例，列表将显示修改后折扣/比例信息；未同意修改前用户下单还是享受原折扣优惠，按原比例抽佣</li>
          <li>2.同意修改后，列表将显示修改后折扣/比例，用户下单将按照新折扣享受优惠，并按照新比例抽佣</li>
          <li>3.拒绝修改后，列表将显示修改前折扣/比例，用户下单将按照原折扣享受优惠，并按照原比例抽佣</li>
        </ul>
      </div>
    </div>

    <!-- 表格 -->
    <div v-loading="loading" class="table_box">
      <el-table :data="tableData" :header-cell-style="{ 'text-align': 'center' }" :cell-style="{ 'text-align': 'center' }" border style="width: 100%;">
        <el-table-column prop="merchName" label="邀请商户名称" />
        <el-table-column prop="merchPhone" label="联系电话" />
        <el-table-column prop="address" label="商户总部地址" />
        <el-table-column prop="stakeValue" label="出资方">
          <template slot="header" slot-scope="scope">
            <span>出资方</span>
            <el-tooltip popper-class="el-tooltip-theme-fresh" placement="top" effect="light">
              <div slot="content">出资方指优惠折扣或活动优惠的钱由谁承担</div>
              <i class="el-icon-question" />
            </el-tooltip>
          </template>
          <template slot-scope="scope">
            <p>{{ scope.row.stakeValue == 1 ? '邀请商户' : '本商户' }}</p>
            <div v-if="scope.row.afterFinancingParty" style="color: red;">
              {{ scope.row.afterFinancingParty == 1 ? '【邀请商户 (待确定) 】' : '【本商户 (待确定) 】' }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="discount" label="优惠折扣">
          <template slot-scope="scope">
            <div>{{ scope.row.discount }}折</div>
            <div v-if="scope.row.afterDiscount >= 0 && scope.row.afterDiscount != null" style="color: red;">【{{ scope.row.afterDiscount }}折 待确定】</div>
          </template>
        </el-table-column>
        <el-table-column prop="commission" label="抽佣比例">
          <template slot-scope="scope">
            <div>{{ scope.row.commission }}%</div>
            <div v-if="scope.row.afterRakeRate >= 0 && scope.row.afterRakeRate != null" style="color: red;">【{{ scope.row.afterRakeRate }}% 未确定】</div>
          </template>
        </el-table-column>
        <el-table-column>
          <template slot="header" slot-scope="scope">
            <span>积分抵扣比例</span>
            <el-tooltip popper-class="el-tooltip-theme-fresh" placement="top" effect="light">
              <div slot="content">指用户可使用积分抵扣金额比例，抵扣的钱邀请商户补贴给合作商户</div>
              <i class="el-icon-question" />
            </el-tooltip>
          </template>
          <template slot-scope="scope">
            <p>{{ scope.row.integralProportion }} %</p>
            <p v-if="scope.row.afterDeductionRatio >= 0 && scope.row.afterDeductionRatio != null" style="color: red;">
              【{{ scope.row.afterDeductionRatio }} % 未确定】
            </p>
          </template>
        </el-table-column>
        <el-table-column v-if="statusIndex == 0" :key="Math.random()" prop="time" label="参与时间" />
        <el-table-column v-if="statusIndex == 0" :key="Math.random()" label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="changeDialog(scope.row, 1)">取消合作</el-button>
            <el-button
              :disabled="
                (scope.row.afterDiscount >= 0 && scope.row.afterDiscount != null) ||
                  (scope.row.afterRakeRate >= 0 && scope.row.afterRakeRate != null) ||
                  (scope.row.afterDeductionRatio >= 0 && scope.row.afterDeductionRatio != null) ||
                  scope.row.afterFinancingParty
                  ? false
                  : true
              "
              type="text"
              size="small"
              @click="changeDialog(scope.row, 2)"
            >
              同意修改
            </el-button>
            <el-button
              :disabled="
                (scope.row.afterDiscount >= 0 && scope.row.afterDiscount != null) ||
                  (scope.row.afterRakeRate >= 0 && scope.row.afterRakeRate != null) ||
                  (scope.row.afterDeductionRatio >= 0 && scope.row.afterDeductionRatio != null) ||
                  scope.row.afterFinancingParty
                  ? false
                  : true
              "
              type="text"
              size="small"
              @click="changeDialog(scope.row, 3)"
            >
              拒绝修改
            </el-button>
            <el-button type="text" size="small" @click="orderMsgBtn(scope.row, 1)">订单记录</el-button>
          </template>
        </el-table-column>

        <el-table-column v-if="statusIndex == 1" :key="Math.random()" prop="exTime" label="退出时间" />
        <el-table-column v-if="statusIndex == 1" :key="Math.random()" prop="exParty" label="退出操作方">
          <template slot-scope="scope">
            {{ scope.row.exParty == 1 ? '邀请者取消合作' : '本商户取消合作' }}
          </template>
        </el-table-column>
      </el-table>
    </div>

    <pag-ination :page-total="pagTotal" @pageNum="getPageNum" @pageSize="getPageSize" />
  </div>
</template>

<script>
import pagInation from '../pagInation/index.vue'
import { inviterQueryCooperationRecord, handleModify, cancelCooperation } from '@/api/business'
export default {
  components: {
    'pag-ination': pagInation
  },
  data() {
    return {
      /* 状态 */
      statusIndex: 0, // 0合作   1已退出
      status_list: [
        {
          id: 0,
          txt: '合作中'
        },
        {
          id: 1,
          txt: '已退出'
        }
      ],

      /* 查询 */
      conditions: {
        merchName: '',
        merchPhone: '',
        stake: [
          {
            value: 1,
            label: '本商户'
          },
          {
            value: 2,
            label: '合作商户'
          }
        ],
        stakeValue: '',
        pageNum: 1,
        pageSize: 10
      },
      pagTotal: null,
      loading: false,

      /* 表格 */
      tableData: [],
      rowConten: ''
    }
  },
  mounted() {
    this.inviterQueryCooperationRecordFun()
  },
  methods: {
    statusBtn(index) {
      this.statusIndex = index
      this.inviterQueryCooperationRecordFun()
    },
    /* 条件查询 */
    serchBtn() {
      this.inviterQueryCooperationRecordFun()
    },
    resetBtn() {
      this.cleanConditionsFun()
      this.inviterQueryCooperationRecordFun()
    },
    // 清空条件
    cleanConditionsFun() {
      this.conditions.merchName = ''
      this.conditions.merchPhone = ''
      this.conditions.stakeValue = ''
    },
    // 获取分页
    getPageNum(val) {
      this.conditions.pageNum = val
      this.inviterQueryCooperationRecordFun()
    },
    getPageSize(val) {
      this.conditions.pageSize = val
      this.inviterQueryCooperationRecordFun()
    },

    /* 表格 */
    changeDialog(row, type) {
      this.rowConten = row
      console.log('this.rowConten', this.rowConten)
      const { id } = this.rowConten
      let operation = '' // 同意：1, 拒绝：0
      if (type == 1) {
        this.$confirm('是否取消合作？取消后用户在当前商家消费将不享受超级会员折扣，请谨慎操作。', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.cancelCooperationFun()
        })
      } else if (type == 2) {
        operation = 1
        this.$confirm('是否同意修改优惠折扣？同意后用户下单将按照新折扣享受优惠。', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          const form = {
            id,
            operation
          }
          this.handleModifyFun(form)
        })
      } else {
        operation = 0
        this.$confirm('是否拒绝修改优惠折扣？拒绝后用户下单将按照原折扣享受优惠。', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          const form = {
            id,
            operation
          }
          this.handleModifyFun(form)
        })
      }
    },
    // 订单记录按钮
    orderMsgBtn(row) {
      console.log('订单记录按钮', row)
      this.$router.push({
        name: 'MarketingActivitySuperParticipateOrderMsg',
        query: {
          merchOption: JSON.stringify(row)
        }
      })
    },
    // 请求合作列表
    inviterQueryCooperationRecordFun() {
      const from = {
        businessName: this.conditions.merchName,
        cooperate: this.statusIndex == 0 ? 1 : 0, // 0：已退出, 1：合作中
        mobile: this.conditions.merchPhone,
        financingParty: this.conditions.stakeValue,
        pageNum: this.conditions.pageNum,
        pageSize: this.conditions.pageSize
      }
      inviterQueryCooperationRecord(from).then(res => {
        console.log('请求合作列表', res)
        if (res.code == 0) {
          this.pagTotal = res.data.total
          const data = res.data.list
          const tableData = []
          data.forEach(el => {
            const dataItem = {
              merchName: el.businessName,
              merchPhone: el.mobilePhone,
              address: el.address,
              stakeValue: el.financingParty,
              afterFinancingParty: el.afterFinancingParty,
              discount: el.discount,
              afterDiscount: el.afterDiscount,
              commission: el.rakeRate,
              integralProportion: el.deductionRatio,
              afterRakeRate: el.afterRakeRate,
              afterDeductionRatio: el.afterDeductionRatio,
              time: el.updateTime,
              id: el.id,
              status: el.status == 0 ? '已退出' : '合作中',
              exTime: el.exitTime,
              exParty: el.exitType,
              joinBusinessId: el.joinBusinessId,
              businessId: el.businessId,
              businessName: el.businessName
            }
            tableData.push(dataItem)
          })
          this.tableData = tableData
          console.log('this.tableData', this.tableData)
        }
      })
    },

    // 同意，拒绝修改
    handleModifyFun(form) {
      handleModify(form).then(res => {
        console.log('同意，拒绝修改', res)
        if (res.code == 0) {
          let content = ''
          if (form.operation == 1) {
            content = '修改成功！'
          } else if (form.operation == 0) {
            content = '已拒绝修改！'
          }
          this.$message({
            type: 'success',
            message: content
          })
          this.inviterQueryCooperationRecordFun()
        }
      })
    },
    // 取消合作
    cancelCooperationFun() {
      const { id } = this.rowConten
      const form = {
        id
      }
      console.log(form)
      cancelCooperation(form).then(res => {
        console.log('取消合作', res)
        if (res.code == 0) {
          this.$message({
            type: 'success',
            message: '取消成功!'
          })
          this.inviterQueryCooperationRecordFun()
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.inquire_box {
	width: 100%;
	overflow: hidden;
	margin-top: 20px;
	padding: 20px;
	background-color: white;
	.status_list {
		width: 100%;
		overflow: hidden;
		.li {
			float: left;
			margin: 8px;
			margin-right: 30px;
			cursor: pointer;
		}
	}

	.serch_box {
		width: 100%;
		overflow: hidden;
		margin-top: 20px;
		.el-input,
		.el-select {
			width: 250px;
			float: left;
			margin-right: 20px;
		}
	}
}
.tipRule {
	padding: 20px;
	box-sizing: border-box;
	border-radius: 5px 5px 0 0;
	background-color: #fff;
}
.table_box {
	width: 100%;
	overflow: hidden;
	padding: 20px;
	background-color: white;
}
</style>
